<template>
	<view class="content_main">
		<view class="name_info">
			<view class="info_text">
				{{infoText}}
			</view>
			<input class="input_item" v-model="phone" type="number" focus />
		</view>
		<view class="btn">
			<button @tap="send" class="btn_item">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			...mapGetters([
				'getUserInfo'
			])
		},
		data() {
			return {
				isClick: true,
				infoText: '联系方式：',
				phone: ''
			}
		},
		onLoad(e) {
			this.phone = this.getUserInfo.phone;
		},
		methods: {
			...mapActions(['getUserInfoStore']),
			async send() {
				let dataObj = {
					phone: this.phone
				};
				var szReg = /^1[3456789]\d{9}$/; // 手机号
				if (!szReg.test(this.phone)) {
					uni.showToast({
						'title': '手机号格式有误',
						'icon': 'none'
					})
					return;
				}
				this.updateUser(dataObj);
			},
			// 修改用户信息
			updateUser(form) {
				if(this.isClick) {
					this.isClick = !this.isClick;
				}else {
					return;
				}
				this.$api.updateUser(form).then(res => {
					if (res.code == 200) {
						this.$u.msg("修改成功")
						this.getUserInfoStore();
						setTimeout(() => {
							this.$u.back();
						}, 1000)
					}
				}).finally(e => {
					this.isClick = true;
				})
			},
		}
	}
</script>

<style lang="scss">
	.content_main {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.info_text {
		color: #9A9A9A;
		font-size: 28rpx;
	}

	.input_item {
		margin: 10rpx;
		box-sizing: border-box;
		border-bottom: 2px solid #0E6EFF;
	}

	.btn {
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.btn_item {
		background: linear-gradient(180deg, #7EC1FF 0%, #0A60FF 100%);
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 5rpx;
		box-shadow: 0 0 20rpx #7EC1FF;
		color: #fff;
		font-size: 28rpx;
		width: 100%;
	}
</style>